<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="false">
				<block slot="backText"></block>
				<block slot="content">订单中心</block>
			</cu-custom>
			<view>
				<u-tabs ref="tabs" :list="list" :current="current" @change="change" lineWidth="30" :scrollable=false
					lineColor="#f56c6c" :activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
			</view>
		</view>
		<swiper style="height: 81vh;" :current="swiperCurrent">
			<swiper-item>
				<scroll-view scroll-y style="height:100%;width:100%;" @scrolltolower="reachBottom">
					<view class="margin-lr-xs">
						<view class="bg-white radius-lg margin-top-lg padding-lr-lg padding-bottom-sm"
							v-for="(res, index) in orders[0]" :key="res.id">
							<view class="flex justify-between cu-bar" @click="toDetail(res.orderId)">
								<view class="flex justify-start">
									<u-icon name="home" :size="15" color="rgb(94,94,94)"></u-icon>
									<view class="text-xl text-bold">{{ res.roomName }}</view>
								</view>
								<view class="flex justify-end text-xl text-bold">{{ res.payStatus==3?'未消费':'已消费' }}
								</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">预约座位</view>
								<view class="text-gray text-sm margin-left-lg">
									{{ res.areaName+'·'+'舒适区'+'·第'+res.seatNum + '座'}}
								</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">开始时间</view>
								<view class="text-gray text-sm margin-left-lg">
									{{ res.startTime+'('+res.times+')' }}
								</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">结束时间</view>
								<view class="text-gray text-sm margin-left-lg">{{ res.endTime}}</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">自习时间</view>
								<view class="text-gray text-sm margin-left-lg">{{ res.times }}</view>
							</view>
							<view class="flex justify-end">
								<view v-if="res.payStatus === 3 && res.showLockStatus === 0" class="cu-btn bg-green shadow-blur radius-lg" @click="orderSeatConsumed(res.orderId)">
									提前开始
								</view>
								<view v-else-if="res.payStatus === 4 && res.showLockStatus === 0" class="cu-btn bg-green shadow-blur radius-lg" @click="orderSeatUnlock(res.orderId)">
									开锁
								</view>
								<view v-if="res.payStatus === 4 && res.shwoRechargeStatus === 0" class="cu-btn bg-green shadow-blur radius-lg margin-left-lg"
									@click="pay(res.orderId)">
									续费
								</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[0]"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="margin-lr-xs">
						<view class="bg-white radius-lg margin-top-lg padding-lr-lg padding-bottom-sm"
							v-for="(res, index) in orders[1]" :key="res.id">
							<view class="flex justify-between cu-bar" @click="toDetail(res.orderId)">
								<view class="flex justify-start">
									<u-icon name="home" :size="15" color="rgb(94,94,94)"></u-icon>
									<view class="text-xl text-bold">{{ res.roomName }}</view>
								</view>
								<view class="flex justify-end text-xl text-bold">{{ res.payStatus==3?'未消费':'已消费' }}
								</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">预约座位</view>
								<view class="text-gray text-sm margin-left-lg">
									{{ res.areaName+'·'+'舒适区'+'·第'+res.seatNum + '座'}}
								</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">开始时间</view>
								<view class="text-gray text-sm margin-left-lg">
									{{ res.startTime+'('+res.times+')' }}
								</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">结束时间</view>
								<view class="text-gray text-sm margin-left-lg">{{ res.endTime}}</view>
							</view>
							<view class="flex justify-start margin-tb-lg">
								<view class="text-sm text-bold">自习时间</view>
								<view class="text-gray text-sm margin-left-lg">{{ res.times }}</view>
							</view>
							<view class="flex justify-end">
								<view v-if="res.payStatus === 4 && res.showLockStatus === 0" class="cu-btn bg-green shadow-blur radius-lg" @click="orderSeatUnlock(res.orderId)">
									开锁
								</view>
								<view v-if="res.payStatus === 4 && res.shwoRechargeStatus === 0" class="cu-btn bg-green shadow-blur radius-lg margin-left-lg"
									@click="pay(res.orderId)">
									续费
								</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[1]"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-modal :show="showCancel" content="确认取消该订单?" :showCancelButton="true" @cancel="cancelModal"
			@confirm="cancelOrder"></u-modal>
	</view>
</template>

<script src="./orderlist.js">

</script>

<style lang="scss" scoped>

</style>